<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        p {
            height: 40px;
            line-height: 40px;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <!-- HTML属性的属性名只能是小写,如果写成大写会自动转化为小写 -->

    <div id="app">
        <!-- class绑定和字符串 -->
        <p :class="classStr">01</p>
        <p :class="classStrMore">02</p>

        <!-- class绑定 和 数组 -->
        <!-- <div>
            <button @click="list.push('five')">增class</button>
            <button @click="list.pop()">删class</button>
            <button @click="list.splice( 1, 1,'second')">改class!!!!!</button>
        </div>
        <p :class="list">03</p> -->

        <!-- class绑定 和 对象 (对象数据的键名即为class名, 键值为true表示显示该class名, 为false则不显示)  -->
        <!-- <button @click="classObj.four = false">删class</button>
        <p :class="classObj">05</p> -->


        <!-- 除了原本的classs名,如何切换新的class名?? -->
        <!-- <ul class="nav">
            <li class="nav-item active"></li>
            <li class="nav-item"></li>
            <li class="nav-item"></li>
            <li class="nav-item"></li>
            <li class="nav-item"></li>
            <li class="nav-item"></li>
        </ul> -->

        

        <!-- 根据现有数据,动态添加或删除某个class名 -->
        <!-- class绑定 和 数组(此时的数据没有挂载到data中, 而是一个javascript表达式, 此时可以在模板中使用挂载的其他数据 ) -->
        <!-- <div>
            <button @click="isActive = !isActive">切换</button>
        </div>
        <p :class="isActive?'active':null">03</p>
        <p :class="['one', 'two', 'three', 'four',isActive?'active':null]">04</p> -->

        <div>
            <button @click="isActive = !isActive">切换</button>
        </div>
        <p :class="isActive?'active':null">03</p>
        <p :class="{one:true,two:true,three:true,four:true, active: isActive}">04</p> 
        <p :class="['one', 'two', 'three', 'four',{active: isActive}]">04</p> 


        <!-- 
            class属性和v-bind:class可以同时存在, 如果绑定的class名不相同,v-bind:class绑定的class名会和原本的class合并

         -->
        <div>
            <button @click="isActive = !isActive">切换</button>
        </div>
        <p class="one two three four" :class="{active: isActive}">07</p>


     
    </div>
</body>
<script>

    /* 
        v-bind和class绑定 style绑定
            1. 一般情况下, v-bind将data中挂载的数据,作为html属性的属性值时 属性值只能是字符串类型(如果指令的值不是字符串类型, 会隐式转化为字符串(xxx.toString()))
            2. 在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
    */


    // var obj = {
    //     a:1,
    //     b: obj.a + 1
    // }

    var vm = new Vue({
        el: "#app",
        data: {
            isActive: true,

            classStr: "one",
            classStrMore: "one two three four",

            // list: ["one", "two", "three", "four",isActive?'active':null],  // 此写法有误 此时配置对象刚传入new Vue(), 不能访问isActive
            list: ["one", "two", "three", "four"],

            // class绑定 和 对象 (对象数据的键名即为class名, 键值为true表示显示该class名, 为false则不显示 )
            classObj:{   
                one:true,
                two:true,
                three:true,
                four:true,
            }
        },

    })

</script>

<script>
    /* 
        1. 数组常见方法
          a. 修改原数组的
          b. 不修改原数组
          c. 数组的遍历方法

        2. 数组排序 

        3. 数组去重  
    
    
    */














</script>
</html>